﻿body {
  margin: 0px;
  font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
  overflow: hidden; }
  body #page {
    display: flex;
    flex-direction: column; }
    body #page #top {
      display: flex;
      width: 100%;
      height: 60px;
      background-color: #456ca7;
      z-index: 100;
      box-shadow: 2px 0 16px 0 rgba(0, 0, 0, 0.3); }
      body #page #top #topLeft {
        min-width: 20vw;
        padding: 0 0 0 2vw;
        line-height: 60px;
        color: #d8dee3;
        font-weight: bold;
        font-size: 110%;
        user-select: none; }
      body #page #top #topRight {
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        align-items: center;
        width: 100%;
        font-size: 85%;
        padding-right: 20px; }
        body #page #top #topRight a {
          padding: 0px 10px;
          margin: 3px;
          text-decoration: none; }
          body #page #top #topRight a i {
            color: #ccd5e3;
            font-size: 140%;
            display: inline-block;
            font-style: normal; }
          body #page #top #topRight a #mt {
            position: relative;
            background-color: rgba(170, 0, 0, 0.7);
            color: #ffffff;
            top: -13px;
            display: inline-block;
            border-radius: 4px;
            padding: 0px 7px;
            margin-left: -10px;
            margin-top: 28px;
            text-align: center;
            font-size: 60%;
            font-weight: bold;
            height: 17px;
            line-height: 17px; }
        body #page #top #topRight a:hover i {
          color: #e3ecfa; }
        body #page #top #topRight #internal {
          display: none; }
          body #page #top #topRight #internal #userFrame {
            display: inline-block;
            background-color: rgba(255, 255, 255, 0.07);
            padding: 10px 15px;
            border-radius: 6px; }
            body #page #top #topRight #internal #userFrame #username {
              color: #ccd5e3;
              padding-right: 10px;
              display: inline-block; }
            body #page #top #topRight #internal #userFrame #userIcon {
              display: inline-block; }
              body #page #top #topRight #internal #userFrame #userIcon i {
                font-size: 140%; }
          body #page #top #topRight #internal #userFrame:hover {
            background-color: rgba(255, 255, 255, 0.21); }
          body #page #top #topRight #internal #astronautFrame {
            display: none;
            background-color: rgba(255, 255, 255, 0.07);
            padding: 10px 15px;
            border-radius: 6px; }
            body #page #top #topRight #internal #astronautFrame #astronaut {
              color: #ccd5e3;
              padding-right: 10px;
              display: inline-block; }
            body #page #top #topRight #internal #astronautFrame #astronautIcon {
              display: inline-block; }
              body #page #top #topRight #internal #astronautFrame #astronautIcon i {
                font-size: 140%; }
          body #page #top #topRight #internal #astronautFrame:hover {
            background-color: rgba(255, 255, 255, 0.21); }
          body #page #top #topRight #internal #admin {
            display: none; }
          body #page #top #topRight #internal #signout {
            padding-right: 1px; }
        body #page #top #topRight #signin {
          padding-right: 1px; }
    body #page #bottom {
      display: flex; }
      body #page #bottom #navigation {
        display: flex;
        display: none;
        flex-direction: column;
        z-index: 100;
        height: calc(100vh - 60px);
        padding-top: 1vh;
        background-color: #456ca7;
        box-shadow: 2px 16px 16px 0 rgba(0, 0, 0, 0.3); }
        body #page #bottom #navigation #topMenu {
          margin-top: 3vh; }
        body #page #bottom #navigation .menu {
          display: block;
          color: #ffb980;
          padding: 15px 0px 10px 12px;
          font-size: 95%; }
        body #page #bottom #navigation .submenu {
          display: none; }
        body #page #bottom #navigation #bottomMenu {
          flex-grow: 1;
          display: flex;
          flex-direction: column;
          justify-content: flex-end;
          padding-bottom: 3vh; }
        body #page #bottom #navigation a.menulink {
          display: block;
          position: relative;
          color: #ccd5e3;
          padding: 0.7vh .55em 0.7vh .3em;
          border-left: 0.25em solid transparent;
          font-weight: normal;
          /*line-height:        40px;*/
          text-decoration: none;
          white-space: nowrap;
          user-select: none;
          text-align: center; }
          body #page #bottom #navigation a.menulink i {
            display: inline-block;
            font-size: 100%;
            width: 44px;
            font-style: normal; }
          body #page #bottom #navigation a.menulink .iconText {
            font-size: 50%; }
        body #page #bottom #navigation a.menulink:hover {
          color: #e8eaef;
          background-color: #6181b2; }
        body #page #bottom #navigation .arrow {
          display: none;
          border-top: 20px solid transparent;
          border-bottom: 20px solid transparent;
          border-left: 20px solid #ff88267d;
          position: absolute;
          height: 0px;
          top: 0;
          right: -20px; }
        @media only screen and (max-width: 512px) {
          body #page #bottom #navigation {
            padding-right: 0px; } }
      body #page #bottom #right {
        position: relative;
        width: 100%;
        height: calc(100vh - 60px);
        z-index: 9; }
        body #page #bottom #right .subnavigation {
          display: none;
          position: absolute;
          top: 0px;
          left: 0px;
          width: 10vw;
          background-color: #b2bed2;
          box-shadow: 2px 0 16px 0 rgba(0, 0, 0, 0.3);
          z-index: 8; }
        body #page #bottom #right #text {
          position: absolute;
          top: 0px;
          left: 0px;
          background-color: lightgrey;
          overflow-y: auto;
          z-index: 7;
          /*@media only screen and (max-width: 512px) {
                        padding-right:      10px;
                    }*/
          min-width: 100%;
          min-height: 100%;
          margin: 0px;
          padding: 0;
          background-color: #eee; }
          body #page #bottom #right #text .headline #headline {
            display: flex;
            align-items: center;
            padding: 1vh 0px 2vh 0px;
            color: #999; }
            body #page #bottom #right #text .headline #headline #logo {
              margin-right: 1vw; }
              body #page #bottom #right #text .headline #headline #logo img {
                width: 100px; }
            body #page #bottom #right #text .headline #headline #title {
              font-size: 180%; }
              body #page #bottom #right #text .headline #headline #title #id {
                display: inline-block; }
              body #page #bottom #right #text .headline #headline #title #name {
                font-size: 50%;
                display: inline-block; }
                body #page #bottom #right #text .headline #headline #title #name #language {
                  display: inline-block;
                  margin-top: 2px;
                  font-size: 60%;
                  vertical-align: top;
                  background-color: #ddd;
                  padding: 2px 4px;
                  border-radius: 4px; }
                body #page #bottom #right #text .headline #headline #title #name #I18NText {
                  display: inline-block;
                  font-size: 170%; }
              body #page #bottom #right #text .headline #headline #title #description {
                font-size: 30%; }
                body #page #bottom #right #text .headline #headline #title #description #language {
                  display: inline-block;
                  margin-top: 2px;
                  font-size: 60%;
                  vertical-align: top;
                  background-color: #ddd;
                  padding: 2px 4px;
                  border-radius: 4px; }
                body #page #bottom #right #text .headline #headline #title #description #I18NText {
                  display: inline-block;
                  font-size: 170%; }
          body #page #bottom #right #text .entity {
            display: flex;
            flex-direction: column;
            padding: 1vh 1vw; }
            body #page #bottom #right #text .entity #about {
              color: #333;
              padding: 1vh 0vh 2vh 1vh; }
            body #page #bottom #right #text .entity .upperButtons {
              display: flex;
              flex-direction: row-reverse;
              margin: 1vh 1vw;
              /* Also used for 'a'-tags which should behave like a button! */
              /*                        button i:first-child {
                                margin-right:       2px;
                                font-size:          75%;
                            }*/ }
              body #page #bottom #right #text .entity .upperButtons .button {
                background: #d6d6d6;
                background-image: linear-gradient(to bottom, #ddd, #c8c8c8);
                color: #696969;
                padding: 6px 10px 4px 10px;
                margin-left: 5px;
                border-radius: 3px;
                border: 0px;
                box-shadow: 2px 2px 3px #bebebe;
                font-size: 60%;
                white-space: nowrap;
                text-decoration: none; }
                body #page #bottom #right #text .entity .upperButtons .button .text {
                  display: inline-block; }
                  body #page #bottom #right #text .entity .upperButtons .button .text .text2 {
                    display: inline-block;
                    padding-left: 8px;
                    vertical-align: top;
                    padding-top: 7px; }
              body #page #bottom #right #text .entity .upperButtons .button:hover {
                background-color: rgbgb(224, 224, 224);
                background-image: linear-gradient(to bottom, #eee, #d4d4d4);
                color: #777; }
              body #page #bottom #right #text .entity .upperButtons .button:active {
                box-shadow: 0 1px 2px #999;
                transform: translateY(4px); }
              body #page #bottom #right #text .entity .upperButtons .button:focus {
                outline: 0px; }
              body #page #bottom #right #text .entity .upperButtons .button:disabled {
                background-color: rgba(0, 0, 0, 0.1);
                background-image: none;
                color: #bbb;
                box-shadow: none; }
            body #page #bottom #right #text .entity #data {
              margin-left: 15px;
              width: calc(100% - 15px);
              display: table;
              border-collapse: collapse; }
              body #page #bottom #right #text .entity #data .row {
                display: table-row;
                width: 100%; }
                body #page #bottom #right #text .entity #data .row .key {
                  display: table-cell;
                  padding: 8px 42px 8px 0;
                  white-space: nowrap;
                  color: #666;
                  vertical-align: top; }
                body #page #bottom #right #text .entity #data .row .subkey {
                  display: table-cell;
                  padding: 8px 42px 8px 0;
                  white-space: nowrap;
                  color: #666;
                  vertical-align: top;
                  padding-left: 20px; }
                body #page #bottom #right #text .entity #data .row .value {
                  display: table-cell;
                  position: relative;
                  width: inherit;
                  display: table-cell;
                  width: inherit;
                  color: #777;
                  padding-top: 5px; }
                  body #page #bottom #right #text .entity #data .row .value input, body #page #bottom #right #text .entity #data .row .value textarea, body #page #bottom #right #text .entity #data .row .value select {
                    background-color: rgba(255, 255, 255, 0.7);
                    padding: 6px 8px;
                    border-radius: 4px;
                    font-size: 90%;
                    border: 0px;
                    width: 100%; }
                  body #page #bottom #right #text .entity #data .row .value input, body #page #bottom #right #text .entity #data .row .value textarea {
                    width: calc(100% - 16px); }
                  body #page #bottom #right #text .entity #data .row .value textarea {
                    /*background-color:   rgba(255, 255, 255, 0.7);
                                        width:              calc(100% - 16px);
                                        padding:            6px 8px;
                                        border:             0px;
                                        border-radius:      4px;
                                        color:              #777;
                                        font-size:          100%;*/
                    vertical-align: top;
                    resize: vertical;
                    min-height: 100px;
                    /* display:            block;*/ }
                  body #page #bottom #right #text .entity #data .row .value select {
                    margin-bottom: 1px; }
                  body #page #bottom #right #text .entity #data .row .value input[type=checkbox] {
                    /*width:              30px;
                                        height:             18px;
                                        margin-top:         8px;*/
                    margin: 14px 11px 7px 11px;
                    width: auto;
                    transform: scale(1.2); }
                  body #page #bottom #right #text .entity #data .row .value input[type=checkbox]:checked {
                    color: #456ca7; }
                  body #page #bottom #right #text .entity #data .row .value input:focus, body #page #bottom #right #text .entity #data .row .value textarea:focus {
                    outline-color: #bdcee9;
                    border-color: #456ca7;
                    box-shadow: 0 0 6px #a3b9db;
                    background: #d7e1f0; }
                  body #page #bottom #right #text .entity #data .row .value input::placeholder {
                    font-size: 95%;
                    font-style: italic;
                    color: #9a9a9a;
                    opacity: 1;
                    /* Firefox fix */ }
                  body #page #bottom #right #text .entity #data .row .value input.error {
                    display: inline-block;
                    background-color: rgba(200, 0, 0, 0.23) !important;
                    color: #c80000 !important; }
                  body #page #bottom #right #text .entity #data .row .value .subvalues .subrow {
                    display: table-row; }
                    body #page #bottom #right #text .entity #data .row .value .subvalues .subrow .subkey {
                      display: table-cell;
                      white-space: nowrap; }
                    body #page #bottom #right #text .entity #data .row .value .subvalues .subrow .subvalue {
                      display: table-cell;
                      width: 100%;
                      padding: 5px 0px 0px 20px; }
                  body #page #bottom #right #text .entity #data .row .value #language {
                    width: 100%;
                    margin-bottom: 1px; }
                  body #page #bottom #right #text .entity #data .row .value a {
                    background-color: rgba(255, 114, 0, 0.25);
                    color: #456ca7;
                    padding: 2px 6px;
                    border-radius: 3px;
                    text-decoration: none; }
                  body #page #bottom #right #text .entity #data .row .value a:hover {
                    background-color: rgba(228, 141, 70, 0.25);
                    color: #f59f5a; }
                body #page #bottom #right #text .entity #data .row .validationError {
                  position: absolute;
                  right: 12px;
                  top: 2px;
                  height: 100%;
                  align-items: center;
                  font-size: 70%;
                  color: #c80000; }
              body #page #bottom #right #text .entity #data .group {
                white-space: nowrap;
                color: #666;
                vertical-align: top;
                margin: 15px 0px 1px 0px; }
              body #page #bottom #right #text .entity #data .separator {
                margin-top: 10px; }
            body #page #bottom #right #text .entity .lowerButtons {
              display: flex;
              flex-direction: row;
              margin: 2vh 0;
              /* Also used for 'a'-tags which should behave like a button! */
              /*                        button i:first-child {
                                margin-right:       2px;
                                font-size:          75%;
                            }*/ }
              body #page #bottom #right #text .entity .lowerButtons button, body #page #bottom #right #text .entity .lowerButtons .button {
                padding: .5vh 1.2vh;
                background-color: #456ca7;
                border-radius: 4px;
                border: 0;
                color: #d6e0ee;
                margin-left: 5px;
                box-shadow: 2px 2px 6px #999;
                white-space: nowrap;
                text-decoration: none; }
                body #page #bottom #right #text .entity .lowerButtons button .text, body #page #bottom #right #text .entity .lowerButtons .button .text {
                  display: inline-block; }
                  body #page #bottom #right #text .entity .lowerButtons button .text .text2, body #page #bottom #right #text .entity .lowerButtons .button .text .text2 {
                    display: inline-block;
                    padding-left: 8px;
                    vertical-align: top;
                    padding-top: 7px; }
              body #page #bottom #right #text .entity .lowerButtons button:hover, body #page #bottom #right #text .entity .lowerButtons .button:hover {
                background-color: #668ac1;
                color: #e4eaf3; }
              body #page #bottom #right #text .entity .lowerButtons button:active, body #page #bottom #right #text .entity .lowerButtons .button:active {
                box-shadow: 0 1px 2px #999;
                transform: translateY(4px); }
              body #page #bottom #right #text .entity .lowerButtons button:focus, body #page #bottom #right #text .entity .lowerButtons .button:focus {
                outline: 0px; }
              body #page #bottom #right #text .entity .lowerButtons button:disabled, body #page #bottom #right #text .entity .lowerButtons .button:disabled {
                background-color: #dfdfdf;
                background-image: none;
                color: #bdbdbd;
                box-shadow: none; }
            body #page #bottom #right #text .entity #saveButton {
              margin-top: 40px; }
          body #page #bottom #right #text .tiles {
            padding: 30px 30px 15px 25px;
            height: calc(100% - 45px); }
            body #page #bottom #right #text .tiles #tiles {
              display: flex;
              justify-content: space-evenly; }
              body #page #bottom #right #text .tiles #tiles .tile {
                background-color: #e2e2e2;
                margin: 2vh .5vw;
                border-radius: 6px;
                width: 50%;
                flex-grow: 1;
                text-align: center;
                min-height: 30vh;
                display: flex;
                justify-content: center;
                align-items: center;
                text-decoration: none; }
                body #page #bottom #right #text .tiles #tiles .tile .content .icon {
                  display: inline-block;
                  font-size: 400%;
                  padding: 10px;
                  text-decoration: none;
                  color: #555;
                  border-radius: 8px; }
                body #page #bottom #right #text .tiles #tiles .tile .content .links {
                  display: inline-block;
                  text-align: left;
                  /*
                                        .group:hover {
                                            background-color:   #ffe0caa3;
                                        }*/ }
                  body #page #bottom #right #text .tiles #tiles .tile .content .links .main {
                    display: block;
                    font-size: 200%;
                    text-decoration: none;
                    color: #555;
                    padding: 4px 8px;
                    border-radius: 6px; }
                  body #page #bottom #right #text .tiles #tiles .tile .content .links .group {
                    display: block;
                    padding: 4px 6px 4px 10px;
                    border-radius: 4px; }
                    body #page #bottom #right #text .tiles #tiles .tile .content .links .group a {
                      color: #555;
                      text-decoration: none; }
                    body #page #bottom #right #text .tiles #tiles .tile .content .links .group a:hover {
                      color: #ff7300; }
              body #page #bottom #right #text .tiles #tiles .tile:hover {
                background-color: #dadada; }
                body #page #bottom #right #text .tiles #tiles .tile:hover .content .icon {
                  color: #ff7300; }
                body #page #bottom #right #text .tiles #tiles .tile:hover .content .links .main {
                  color: #ff7300; }
          body #page #bottom #right #text .fullScreenDialog {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            z-index: 10000;
            text-align: center;
            background-color: rgba(0, 0, 0, 0.6); }
            body #page #bottom #right #text .fullScreenDialog .box {
              position: relative;
              display: inline-table;
              top: 20vh;
              background-color: #CCCCCC;
              border-radius: 6px;
              box-shadow: 2px 0 16px 0 rgba(0, 0, 0, 0.3); }
              body #page #bottom #right #text .fullScreenDialog .box #headline {
                background-color: #ff7300;
                border-radius: 6px 6px 0px 0px;
                padding: 10px 20px;
                text-align: center;
                font-weight: bold; }
              body #page #bottom #right #text .fullScreenDialog .box #body {
                background-color: #DDDDDD;
                border-radius: 0px 0px 6px 6px;
                padding: 10px 20px; }
                body #page #bottom #right #text .fullScreenDialog .box #body #confirmation {
                  padding: 10px 10px 15px 10px; }
                body #page #bottom #right #text .fullScreenDialog .box #body #description {
                  padding: 10px 10px 15px 10px; }
                body #page #bottom #right #text .fullScreenDialog .box #body #buttons {
                  display: flex;
                  justify-content: flex-end; }
                  body #page #bottom #right #text .fullScreenDialog .box #body #buttons button {
                    border: 0;
                    border-radius: 4px;
                    background-color: orangered;
                    margin-left: 5px;
                    padding: 6px 16px 4px 16px; }
                  body #page #bottom #right #text .fullScreenDialog .box #body #buttons button:hover {
                    background-color: #ffab67; }
            body #page #bottom #right #text .fullScreenDialog .withErrors #headline {
              background-color: #f92222 !important; }
            body #page #bottom #right #text .fullScreenDialog .withErrors #body #buttons button {
              background-color: #f92222 !important; }
            body #page #bottom #right #text .fullScreenDialog .withErrors #body #buttons button:hover {
              background-color: #f76a6a !important; }

#response {
  margin-top: 30px; }
  #response .HTTP {
    padding-left: 14px;
    font-size: 88%;
    padding: 10px 15px 7px 15px;
    border-radius: 6px;
    display: inline-block; }
  #response .OK {
    color: #2db72d;
    border: 1px solid #91ca8a;
    background-color: #b5e2af; }
  #response .Warning {
    color: #83841d;
    border: 1px solid #d9da32;
    background-color: #f2f372; }
  #response .Error {
    color: #a21e1e;
    border: 1px solid #bd7070;
    background-color: #f59f9f; }
